<template>
  <div>
    <v-parallax :src="parallaxSrc" height="986" class="hidden-sm-and-down">
      <!-- <v-layout column align-center> -->
        <v-layout column align-center justify-center>
          <v-flex style="margin-top:400px;">
            <v-card >
              <v-card-media>
                <video autoplay="autoplay" controls="controls" width="790" height="445" src="https://www.sx-cc.com/statics/video/ichexpo.m4v">
                </video>
              </v-card-media>
            </v-card>
          </v-flex>
        </v-layout>
      <!-- </v-layout> -->
    </v-parallax>
    <v-layout class="hidden-md-and-up">
      <v-flex>
        <!-- <v-parallax :src="parallaxSrc" height="200"></v-parallax> -->
        <img :src="parallaxSrc" alt="" style="width:100%">
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex xs12 sm12 md5 offset-md1>
        <media-report :data="data.media" v-if="data.media"></media-report>
      </v-flex>
      <v-flex xs12 sm12 md5>
        <v-layout column>
          <v-flex xs12 >
            <live-video :data="data.live" v-if="data.live"></live-video>
          </v-flex>
          <v-flex xs12>
            <notics :data="data.notics" v-if="data.notics"></notics>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex>
        <chang-cheng :data="data.changcheng" v-if="data.changcheng"></chang-cheng>
      </v-flex>
      <v-flex>
        <san-jin :data="data.sanjin" v-if="data.sanjin"></san-jin>
      </v-flex>
      <v-flex>
        <tai-hang :data="data.taihang" v-if="data.taihang"></tai-hang>
      </v-flex>
      <v-flex>
        <huang-he :data="data.huanghe" v-if="data.huanghe"></huang-he>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
import { Notics, LiveVideo, MediaReport, ChangCheng, SanJin, TaiHang, HuangHe } from './components/index'
import { fetchIndex } from '@/api/homepage'
export default {
  name: 'IndexPage',
  components: {
    Notics,
    LiveVideo,
    MediaReport,
    ChangCheng,
    SanJin,
    TaiHang,
    HuangHe
  },
  data () {
    return {
      parallaxSrc: require('@/assets/images/bg.jpg'),
      data: {
        notics: null,
        media: null,
        live: null,
        changcheng: null,
        sanjin: null,
        taihang: null,
        huanghe: null
      }
    }
  },
  created: function () {
    this.getData()
  },
  methods: {
    getData: function () {
      fetchIndex({}).then(res => {
        console.log(res.data)
        this.data.notics = []
        this.data.notics = res.data.data.notic
        this.data.media = []
        this.data.media = res.data.data.media
        this.data.live = []
        this.data.live = res.data.data.live
        this.data.changcheng = []
        this.data.changcheng = res.data.data.changcheng
        this.data.sanjin = []
        this.data.sanjin = res.data.data.sanjin
        this.data.taihang = []
        this.data.taihang = res.data.data.taihang
        this.data.huanghe = []
        this.data.huanghe = res.data.data.huanghe
      })
    }
  }
}
</script>
